<template>
    <!-- 首页-待我审批任务 -->
    <div class="MyTask">
        <div class="title">
            <span>待我审批任务</span>
            <!-- <i class="el-icon-arrow-right"></i> -->
        </div>
        <ul class="taskList">
            <li class="taskItem" v-for="item in taskList" :key="item.id">
                <div class="itemLeft">
                    <div class="titleBox">
                        <div class="tag" v-if="item.urgency===1">一般</div>
                        <div class="tag urgency" v-if="item.urgency===2">紧急</div>
                        <div class="tag overtime" v-if="item.overdue===1">超时</div>
                        <div class="taskTitle">{{ item.issueContent }}</div>
                    </div>
                    <div class="initiatorBox">
                        <div class="time">发起时间：{{ item.checkTime }}</div>
                        <div class="user">发起人：{{ item.userName }}</div>
                        <div class="state">{{ item.state | getStateValue }}</div>
                    </div>
                </div>
                <div class="rightBtn" @click="goDispose(item)">去处理</div>
            </li>
            <div class="emptyBox" v-if="taskList.length===0">
                <el-empty description="暂无数据"></el-empty>
            </div>
        </ul>
    </div>
</template>

<script>
import { getUserApprove } from "@/api/home"
export default {
    name: "MyTask",
    data() {
        return {
            deptId: "",
            taskList: []
        }
    },
    watch: {
        currentPorject: {
            handler(val, oldVal) {
                if (val.deptId && oldVal && val.deptId != oldVal.deptId) {
                    this.deptId = val.deptId;
                    this.getUserApproveData()
                }
            },
            deep: true,
            immediate: true,
        },
    },
    computed: {
        currentPorject() {
            return this.$store.state.porjectObject
        },
    },
    created(){
        this.deptId = localStorage.getItem("deptId")
        this.getUserApproveData()
    },
    methods: {
        // 获取待审批任务数据
        getUserApproveData(){
            getUserApprove(this.deptId).then(res=>{
                let safetyList = res.data.safetyList
                let qualityList = res.data.qualityList
                safetyList.forEach(element => {
                    element.type = "safety"
                });
                qualityList.forEach(element => {
                    element.type = "quality"
                });
                this.taskList = safetyList.concat(qualityList)
            })
        },

        // 去处理
        goDispose(item){
            let path = ""
            if(item.type==="safety"){
                path = "/safety/problemDetail"
            }else if(item.type==="quality"){
                path = "/quality/problemDetail"
            }
            this.$router.push({
                path,
                query: {
                    checkId: item.id,
                    problemType: item.type
                }
            })
        }
    },
    filters: {
        getStateValue(state){
            switch (state) {
                case 10:
                    return "待整改"
                    break;

                case 11:
                    return "不合格"
                    break;

                case 12:
                    return "不合格"
                    break;

                case 20:
                    return "待复查"
                    break;

                case 30:
                    return "待核验"
                    break;

                case 100:
                    return "已完成"
                    break;

                default:
                    break;
            }
        }
    }
}
</script>

<style scoped lang="scss">
.MyTask{
    width: 955px;
    margin-right: 20px;
    .title{
        cursor: pointer;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        span{
            font-size: 16px;
            color: #333333;
            font-weight: 700;
            line-height: 1;
        }
        i{
            font-size: 18px;
            color: #7A7B7C;
        }
    }
    .taskList{
        width: 100%;
        height: 436px;
        padding: 18px;
        box-sizing: border-box;
        border-radius: 5px;
        border: 1px solid #ececec;
        background-color: #ffffff;
        .taskItem{
            height: 80px;
            padding: 0 20px 0 35px;
            box-sizing: border-box;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            &:hover{
                background-color: #f8faff;
            }
            .itemLeft{
                flex: 1;
                overflow: hidden;
                .titleBox{
                    display: flex;
                    align-items: center;
                    position: relative;
                    &::after{
                        content: "";
                        width: 16px;
                        height: 16px;
                        border-radius: 50%;
                        background-color: #f4b646;
                        position: absolute;
                        top: 50%;
                        left: -26px;
                        transform: translateY(-50%);
                    }
                    .tag{
                        margin-right: 12px;
                        width: 42px;
                        height: 24px;
                        border-radius: 3px;
                        color: #ffffff;
                        text-align: center;
                        line-height: 24px;
                        background-color: #66b1ff;
                    }
                    .urgency{
                        background-color: #ea6f6f;
                        box-shadow: 1px 1px 5px 0px rgba(245, 18, 71, 0.36);
                    }
                    .overtime{
                        background-color: #f51247;
                        box-shadow: 1px 1px 5px 0px rgba(245, 18, 71, 0.46);
                    }
                    .taskTitle{
                        flex: 1;
                        font-size: 16px;
                        font-weight: 700;
                        color: #333333;
                        line-height: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                .initiatorBox{
                    margin-top: 10px;
                    display: flex;
                    align-items: center;
                    .time,.user{
                        font-size: 14px;
                        color: #abacb2;
                    }
                    .time{
                        width: 220px;
                    }
                    .user{
                        margin: 0 50px;
                        width: 130px;
                    }
                    .state{
                        font-size: 14px;
                        color: #ff0101;
                    }
                }
            }
            .rightBtn{
                width: 100px;
                height: 35px;
                margin-left: 40px;
                border-radius: 8px;
                background-color: #2561ef;
                box-shadow: 0px 5px 30px 0px rgba(41, 132, 248, 0.3);
                color: #ffffff;
                text-align: center;
                line-height: 35px;
                cursor: pointer;
            }
        }
        .emptyBox{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
